import { PageContainer } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, message, Modal } from 'antd';
import { DeleteOutlined, PlusOutlined, QuestionOutlined, SendOutlined } from '@ant-design/icons';
import type { HostInfoEntity } from './service';
import { deleteHostInfo, listHostInfo, startUp } from './service';
import { useCallback, useRef, useState } from 'react';
import { Link } from 'umi';
import { hasRouteChildren } from '@/utils/utils';

export const editPagePathname = 'host-info/edit';
const columns: ProColumns<HostInfoEntity>[] = [
  {
    title: '主机名称',
    dataIndex: 'name',
    align: 'left',
    render: (dom, entity) => (
      <Link to={{ pathname: editPagePathname, state: { primaryKey: entity.id } }}>{dom}</Link>
    ),
    // search: true,
    // valueType: 'money',
    // sorter: true,
  },
  {
    title: 'MAC 地址',
    dataIndex: 'mac',
    align: 'center',
    width: 130,
    // search: true,
    // valueType: 'money',
    // sorter: true,
  },
  {
    title: '网关地址',
    dataIndex: 'gateway',
    align: 'center',
    width: 130,
    // search: true,
    // valueType: 'money',
    // sorter: true,
  },
  {
    title: '端口',
    dataIndex: 'port',
    align: 'center',
    width: 80,
    // search: true,
    // valueType: 'money',
    // sorter: true,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    align: 'center',
    // search: true,
    // valueType: 'money',
    // sorter: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createdTime',
    width: 160,
    align: 'center',
    search: false,
    // valueType: 'money',
    // sorter: true,
  },
  {
    title: '修改时间',
    dataIndex: 'updatedTime',
    width: 160,
    align: 'center',
    search: false,
    // valueType: 'money',
    // sorter: true,
  },
  {
    title: '操作',
    dataIndex: 'updatedTime',
    width: 80,
    align: 'center',
    search: false,
    render: (dom, entity) => (
      <a
        className="ant-dropdown-link"
        title="启动主机"
        onClick={() => {
          startUp(entity.id!!).then(() => {
            message.info(`已向【${entity.name}】发送启动主机指令`);
          });
        }}
      >
        <SendOutlined />
      </a>
    ),
  },
  // {
  //  title: '字典名称',
  //  dataIndex: 'isTransferText',// 列表对象的字段名称
  //  valueType: 'select',// 字典显示类型
  //  key: 'isTransfer',// 查询参数的字段名称
  //  // initialValue: '0',
  //  // initialValue: ['0'],
  //  width: 100,
  //  request: getDicTypeValue,
  //  params: { dicType: 'WhetherEnum' },// 请求字典信息的请求参数
  //  // filters: true,
  //  // onFilter: true,
  // },
];

export default (props: any) => {
  if (hasRouteChildren(props)) {
    return <>{props.children}</>;
  }
  const actionRef = useRef<ActionType>();
  const [selectedRows, setSelectedRows] = useState<HostInfoEntity[]>([]);

  const handlerRemove = useCallback(() => {
    Modal.confirm({
      title: (
        <>
          确定要删除选中的 <strong>{selectedRows.length}</strong> 项信息吗？
        </>
      ),
      content: '您正在进行危险操作，请核对后确认删除！',
      icon: <QuestionOutlined />,
      centered: true,
      maskClosable: true,
      onOk() {
        const hide = message.loading('正在删除');
        return deleteHostInfo(selectedRows.map((value) => value.id)).finally(() => {
          setSelectedRows([]);
          actionRef.current?.reloadAndRest?.();
          hide();
        });
      },
    });
  }, [selectedRows]);

  const batchStartup = useCallback(() => {
    selectedRows.forEach((value) => {
      startUp(value.id!!).then(() => {
        message.info(`已向【${value.name}】发送启动主机指令`);
      });
    });
  }, [selectedRows]);
  const toolBarBtn = useCallback(() => {
    const list = [];
    list.push(
      <Button type="primary" onClick={batchStartup} disabled={selectedRows?.length <= 0}>
        <SendOutlined /> 批量开机
      </Button>,
    );
    list.push(
      <Link to={editPagePathname}>
        <Button type="primary">
          <PlusOutlined /> 添加
        </Button>
      </Link>,
    );
    list.push(
      <Button danger onClick={handlerRemove} disabled={selectedRows?.length <= 0}>
        <DeleteOutlined /> 批量删除
      </Button>,
    );
    return list;
  }, [batchStartup, handlerRemove, selectedRows?.length]);

  return (
    <PageContainer header={{ breadcrumb: {} }}>
      <ProTable<HostInfoEntity, API.PageParams>
        headerTitle="主机信息"
        actionRef={actionRef}
        rowKey="id"
        request={listHostInfo}
        columns={columns}
        search={{ labelWidth: 80, defaultCollapsed: true }}
        tableAlertRender={false}
        options={{ fullScreen: true, reload: true, setting: true }}
        toolBarRender={toolBarBtn}
        rowSelection={{
          onChange: (_, rows) => {
            setSelectedRows(rows);
          },
        }}
      />
    </PageContainer>
  );
};
